/* biome-ignore-all lint/suspicious/noDuplicateCustomProperties: `@variant` blocks aren't parsed as different contexts */

@import "tailwindcss";

@plugin "tailwindcss-animate";

@custom-variant dark (&:is(&.dark, .dark *));

:root {
  --background: var(--color-white);
  --foreground: var(--color-neutral-950);
  --primary: var(--color-neutral-950);
  --primary-foreground: var(--color-neutral-50);
  --secondary: var(--color-neutral-200);
  --secondary-foreground: var(--color-neutral-600);
  --muted: var(--color-neutral-100);
  --muted-foreground: var(--color-neutral-400);
  --accent: var(--color-yellow-500);
  --accent-foreground: var(--color-neutral-50);
  --prose: var(--color-neutral-600);
  --overlay: hsl(0, 0%, 0%, 0.2);
  --border: var(--color-neutral-200);
  --ring: var(--color-neutral-200);

  --text-base: 0.9375rem;
  --text-sm: 0.8125rem;

  --shadow-elevation:
    0 0 0 1px rgb(0 0 0 / 4%), 0 2px 12px rgb(0 0 0 / 6%), 0 8px 36px
    rgb(0 0 0 / 6%);

  @variant dark {
    --background: var(--color-black);
    --foreground: var(--color-neutral-50);
    --primary: var(--color-neutral-50);
    --primary-foreground: var(--color-neutral-950);
    --secondary: var(--color-neutral-800);
    --secondary-foreground: var(--color-neutral-400);
    --muted: var(--color-neutral-900);
    --muted-foreground: var(--color-neutral-600);
    --accent: var(--color-yellow-400);
    --accent-foreground: var(--color-neutral-950);
    --prose: var(--color-neutral-300);
    --overlay: hsl(0, 0%, 0%, 0.8);
    --border: var(--color-neutral-800);
    --ring: var(--color-neutral-800);

    --shadow-elevation:
      0 2px 12px rgb(0 0 0 / 18%), 0 8px 36px rgb(0 0 0 / 32%);

    &.elevation,
    & .elevation {
      --background: var(--color-neutral-900);
      --muted: var(--color-neutral-800);
      --muted-foreground: var(--color-neutral-500);
      --secondary: var(--color-neutral-700);
      --border: var(--color-neutral-800);
      --ring: var(--color-neutral-700);
    }
  }
}

@theme inline {
  --breakpoint-2xs: 25rem;
  --breakpoint-xs: 30rem;

  --font-sans: var(--font-inter), sans-serif;
  --font-sans-feature-settings: "liga" 1, "calt" 1;
  --font-mono: var(--font-geist-mono), monospace;

  --text-base: var(--text-base);
  --text-sm: var(--text-sm);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-prose: var(--prose);
  --color-overlay: var(--overlay);
  --color-border: var(--border);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);

  --shadow-elevation: var(--shadow-elevation);
}

@layer base {
  body {
    @apply bg-background text-foreground font-sans antialiased text-base overflow-x-hidden;
  }

  * {
    scrollbar-width: thin;
    @apply selection:bg-foreground/15;
  }

  *:where(:not(.not-base, .not-base *)) {
    &,
    &::before,
    &::after {
      @apply border-border outline-ring;
    }

    &:focus-visible {
      @apply outline-2 outline-offset-0;
    }
  }

  :where(:not(.not-base, .not-base *)) {
    strong {
      @apply font-medium text-foreground;
    }

    a,
    option,
    label,
    *[role="button"],
    button:not([disabled]),
    input:not([disabled]),
    textarea:not([disabled]),
    select:not([disabled]) {
      @apply touch-manipulation;
    }

    input::placeholder,
    textarea::placeholder {
      @apply text-muted-foreground;
    }

    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
      @apply hidden;
    }

    button:not(:disabled),
    [role="button"]:not(:disabled) {
      @apply cursor-pointer;
    }
  }
}

@utility shadcnui {
  * {
    @apply border-border outline-ring/50;
  }

  & {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);

    --text-base: 1rem;
    --text-sm: 0.875rem;
  }

  @variant dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.145 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
  }
}

@utility container {
  @apply mx-auto max-w-(--container-2xl) px-8;
}

@utility link {
  @apply transition-colors duration-150 ease-out font-medium text-foreground underline rounded-xs decoration-border decoration-dotted underline-offset-2 hover:decoration-muted-foreground focus-visible:decoration-muted-foreground has-[code]:outline-none focus-visible:has-[code]:[&_code]:outline-2 has-[code]:decoration-secondary-foreground/40 hover:has-[code]:decoration-secondary-foreground/60 focus-visible:has-[code]:decoration-secondary-foreground/60;
}

@utility code-block {
  --shiki-background: var(--muted);
}

@utility prose {
  :is(& > h2, & > :not(.not-prose) h2) {
    @apply font-medium mb-4;

    &:not(:first-child) {
      @apply mt-9 md:mt-10;
    }
  }

  :is(& > h3, & > :not(.not-prose) h3) {
    @apply font-medium mb-4;

    &:not(:first-child) {
      @apply mt-6.5 md:mt-8;
    }
  }

  :is(& > h4, & > :not(.not-prose) h4) {
    @apply font-medium mb-4 text-sm;

    &:not(:first-child) {
      @apply mt-5 md:mt-6;
    }
  }

  :is(& > p, & > :not(.not-prose) p) {
    @apply text-prose text-pretty leading-[1.65];

    text-box-trim: trim-both;

    &:not(:last-child) {
      @apply mb-5;
    }
  }

  :is(& > code, & > :not(.not-prose) code) {
    @apply font-mono text-[0.875em] bg-muted rounded-[0.325em] px-[0.375em] pb-[0.225em] pt-[0.2em] text-secondary-foreground box-decoration-clone;
  }

  :is(& > a, & > :not(.not-prose) a) {
    @apply link;
  }

  :is(& > figure, & > :not(.not-prose) figure),
  :is(& > .code-block, & > :not(.not-prose) .code-block),
  :is(& > .properties-table, & > :not(.not-prose) .properties-table) {
    @apply mt-5;

    &:not(:last-child) {
      @apply mb-5;
    }
  }
}

@utility prose-sm {
  :is(& > p, & > :not(.not-prose) p) {
    @apply text-sm;

    &:not(:last-child) {
      @apply mb-2;
    }
  }
}

@utility scrollbar-thumb-* {
  --scrollbar-thumb-alpha: calc(--modifier(integer) * 1%);
  --scrollbar-thumb: --alpha(
    --value(--color-\*, [color]) /
    var(--scrollbar-thumb-alpha, 100%)
  );

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track, transparent);

  &::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 100%;
  }
}

@utility scrollbar-track-* {
  --scrollbar-track-alpha: calc(--modifier(integer) * 1%);
  --scrollbar-track: --alpha(
    --value(--color-\*, [color]) /
    var(--scrollbar-track-alpha, 100%)
  );

  scrollbar-color: var(
      --scrollbar-thumb,
      light-dark(rgb(0 0 0 / 40%), rgb(255 255 255 / 40%))
    )
    var(--scrollbar-track);

  &::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}
